
import { Card, CardProps, List } from '@arco-design/web-react';
import { SubtitleNode } from '@/app/applications/subTileTans/page';

interface SubtitleResultProps {
  items: SubtitleNode[];
  cardProps: Partial<CardProps>
}

export const SubtitleResult = ({ items, cardProps }: SubtitleResultProps) => {
  const renderListItem = (item: SubtitleNode, index: number) => {
    return (
      <List.Item key={index}>
        <div className="p-3 bg-white rounded-lg shadow-sm w-full">
          {item.type === 'cue' && (
            <div className='flex flex-row'>
              <div className='flex-1'>

                {item.data.transText === null && <div className="text-yellow-800">
                无效文本
                </div>}
                <div className="text-gray-800">
                  {item.data.transText}
                </div>
                <div className="text-gray-500 text-sm">
                  {item.data.text}
                </div>
              </div>
              <div className="flex flex-col items-end text-xs text-gray-500 mb-1">
                <span>
                  {new Date(item.data.start).toISOString().substr(11, 8)} -
                  {new Date(item.data.end).toISOString().substr(11, 8)}
                </span>
                <span className='text-base'>#{index + 1}</span>
              </div>

            </div>
          )}
        </div>
      </List.Item>
    );
  };

  return (
    <Card title="翻译结果" className="mt-4 max-w-200 bg-gray-100" {...cardProps}>
      <List
        dataSource={items}
        render={renderListItem}
        virtualListProps={{
          height: 384, // 与原 max-h-96 对应 (96 * 4px = 384px)
        }}
        className="p-4"
      />
    </Card>
  );
};